<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <button @click="persons=['a','b','c']">直接替换为新数据</button>
      <button @click="persons.push('小张')">通过数组的变更方法修改数据</button>
      <button @click="persons[0]='老李'">通过下标修改数组</button>
      <button @click="persons.length=0">通过length修改数组</button>
      <ul>
        <li v-for="item in persons" :key="item">{{item}}</li>
      </ul>
    </div>
    <script>
      Vue.config.productionTip = false;
      /* 
        修改数组的方式:
          1. 直接替换为新的数组
          2. 通过数组的变更方法修改数据
          3. 通过下标修改数组
          4. 通过length修改数组

        响应式修改数组的方式:
          1. 直接替换为一个新数组
          2. 使用数组的边恒方法修改数组
          3. 如果一定要使用数组的非变更方法,则可以把得到的新数组重新赋值即可
      */
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            persons: ["张三", "李四", "王五", "赵六"],
          };
        },
        methods: {
          handler() {},
        },
      });

      //其实数组的变更方法并没有改变数组的地址,所以本不应该具有响应式的
      //但是vue为了方便用户响应式操作,重写了数组的变更方法,让变更方法拥有的响应式
      //重写的变更方法有push(),pop(),shift(),unshift(),splice(),sort(),reverse()

      //响应式就是数据更新了,会执行重新渲染
      function reRender() {
        console.log("重新渲染");
      }

      const oldPush = Array.prototype.push;
      Array.prototype.push = function (value) {
        oldPush.call(this, value);
        reRender();
      };

      const arr = [1, 2, 3];
      arr.push(4);
      console.log(arr);
    </script>
  </body>
</html>
